<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板语法</title>
  </head>
  <body>
    <div id="app">
      <h2>模板语法</h2>
      <!-- 可以使用文本插值，用双大括号的语法，将data里面的数据渲染到页面上 -->
      <!-- 除了undefined和null，其他类型的数据都会直接转成字符串进行显示 -->
      <p>count: {{ count }}</p>
      <p>msg: {{ msg }}</p>
      <p>show: {{ show }}</p>
      <p>und: {{ und }}</p>
      <p>nl: {{ nl }}</p>
      <p>arr: {{ arr }}</p>
      <p>obj: {{ obj }}</p>
      <p>fn2: {{ fn2 }}</p>
      <button v-on:click="fn">btn</button>

      <hr />

      <h2>原始的html</h2>
      <!-- <div>{{ content }}</div> -->
      <!-- v-html指令将内容，尝试转成html标签进行显示 -->
      <!-- 只能对信得过的内容，进行v-html的渲染，可能会造成xss攻击 -->
      <div v-html="content"></div>

      <hr />

      <h2>属性绑定</h2>
      <!-- 属性希望使用变量的时候，需要使用v-bind的指令 -->
      <!-- v-bind可以直接缩写成: -->
      <p v-bind:title="title">属性绑定</p>
      <img v-bind:src="url" alt="" />
      <img :src="url" alt="" />
    </div>

    <script src="./lib/Vue3.js"></script>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            count: 1,
            msg: "hello",
            show: false,
            und: undefined,
            nl: null,
            arr: [1, 2, 3, 4],
            obj: { a: 3, b: 4 },
            fn2() {},
            content: "<h1>hello 千锋！</h1>",
            title: "标题",
            url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
          };
        },
        methods: {
          fn() {
            this.count++;
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
